<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="form" label-position="left" label-width="90px">
    <el-form-item label="预警内容:">
      {{ content.warnContent }}
    </el-form-item>
    <el-form-item label="预警时间:">
      {{ content.warnTime }}
    </el-form-item>
    <el-form-item label="预警等级:">
      {{ content.level }}
    </el-form-item>
    <el-form-item label="发启者:">
      {{ content.initiator }}
    </el-form-item>
    <el-form-item label="接收者:">
      {{ content.receiver }}
    </el-form-item>
    <el-form-item label="预警类型:" >
      {{ content.type }}
    </el-form-item>
    <el-form-item label="预警反馈:" required prop="backContent">
      <el-input v-model="form.backContent" :rows="3" type="textarea" />
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
export default {
  props: {
    content: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const ruleFormRef = ref()
    const rules = reactive({
      backContent: { required: true, message: '该字段必填' },
    })
    const form = reactive({
      backContent: props.content.backContent,
    })
    const submitForm = () => {
      let result = {}
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          result =  {
            id:props.content.id,
            ...form
          }
        } else {
          ElMessage({
            message: '请将基本信息补充完整',
            type: 'warning',
          })
          result = false
        }
      })
      return result
    }
    return {
      ruleFormRef,
      form,
      rules,
      submitForm
    }
  },
}
</script>
<style lang="scss" scoped>
.el-form{
  padding: 0 5%;
}
</style>
